<template>
  <uv-popup
    ref="SupplementRef"
    mode="center"
    :overlay="false"
    :close-on-click-overlay="false"
    :round="20"
    :z-index="8"
    bg-color="none"
  >
    <view class="popup-content">
      <image :src="loading" />
      <view class="popup-tip"> 补药中、请勿操作 </view>
    </view>
  </uv-popup>
</template>
<script setup lang="ts">
import { watch, ref } from "vue";
import loading from "@/static/loading.png";
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:show"]);

const SupplementRef = ref<any>(null);
const first = ref(true);

// 打开弹窗
const open = () => {
  let pages = getCurrentPages();
  let page = pages[pages.length - 1];
  if (page.route != "pages/index/index") {
    uni.navigateBack({ delta: 1 });
  }
  setTimeout(() => {
    SupplementRef.value.open();
  }, 1000);
};

// 关闭弹窗
const close = () => {
  SupplementRef.value.close();
  emit("update:show", false);
};

watch(
  () => props.show,
  (newVal) => {
    if (newVal) {
      first.value = false;
      open();
    } else {
      if (!first.value) {
        close();
      }
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>
<style lang="scss" scoped>
.popup-content {
  width: 312.75rpx;
  height: 312.75rpx;
  background: #fff;
  box-shadow: 0 20.85rpx 34.75rpx 0 rgba(0, 0, 0, 0.16);
  border-radius: 13.9rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  image {
    width: 134rpx;
    height: 134rpx;
  }
  .popup-tip {
    font-family: Source Han Sans;
    font-weight: 400;
    font-size: 25.02rpx;
    color: #3d3d3d;
    line-height: 36.14rpx;
    margin-top: 22.24rpx;
    text-align: center;
  }
}
</style>
